<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/shield/tags" prefix="shield"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<script type="text/javascript" src="${ctxPath }/js/lib/html2canvas/html2canvas.js?2019070301"></script>
<%-- <script type="text/javascript" src="${ctxPath }/js/lib/dom-to-image/dom-to-image.js?2019070301"></script> --%>
<!-- <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> -->
<div style="position: absolute;">
	<input type="button" value="保存(html2canvas)" id="saveData"/>
	<input type="button" value="保存1(html2canvas)" id="saveData1"/>
</div>
<script type="text/javascript">
$('#saveData').click(function () {
	alert(123)
    //#proMain:要截图的DOM元素
    //useCORS:true:解决跨域问题
    html2canvas(document.querySelector('html'),{useCORS:true}).then(function (canvas) {
        //获取年月日作为文件名
        var timers=new Date();
        var fullYear=timers.getFullYear();
        var month=timers.getMonth()+1;
        var date=timers.getDate();
        var randoms=Math.random()+'';
        //年月日加上随机数
        var numberFileName=fullYear+''+month+date+randoms.slice(3,10);
        var imgData=canvas.toDataURL();
        //保存图片
        var saveFile = function(data, filename){
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };
        //最终文件名+文件格式
        var filename = numberFileName + '.png';
        saveFile(imgData,filename);
        //document.body.appendChild(canvas);  把截的图显示在网页上
    })
});
$('#saveData1').click(function () {
	html2canvas(document.querySelector("#bodydoc")).then(canvas => {
		//获取年月日作为文件名
        var timers=new Date();
        var fullYear=timers.getFullYear();
        var month=timers.getMonth()+1;
        var date=timers.getDate();
        var randoms=Math.random()+'';
        //年月日加上随机数
        var numberFileName=fullYear+''+month+date+randoms.slice(3,10);
	  //  document.body.appendChild(canvas);  // 直接使用canvas
	    var imgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
	    // var imgUrl = canvas.toDataURL('image/png', 1); // 此方法可以设置截图质量0-1
	    var triggerDownload = $("<a>").attr("href", imgUrl).attr("download", numberFileName+"异常信息.png").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
	});
});

/*图片跨域及截图模糊处理*/
/* var canvasContent = document.getElementById('content'),//需要截图的包裹的（原生的）DOM 对象
width = canvasContent.clientWidth,//canvasContent.offsetWidth || document.body.clientWidth; //获取dom 宽度
height = canvasContent.clientHeight,//canvasContent.offsetHeight; //获取dom 高度
canvas = document.createElement("canvas"), //创建一个canvas节点
scale = 4; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = canvasContent.clientWidth * scale + "px";
canvas.style.height = canvasContent.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale */
</script>
